<template>
    <div>
        <!-- 基本信息 -->
        <div>
            <div class="basic">
                <div class="header">
                    <div class="title">
                        <span>基本信息</span>
                    </div>
                </div>
                <div class="content">
                    <div class="one">
                        <div class="first">
                            <span class="name">专家组名称：</span>
                            <span class="con">{{ groupName }}</span>
                        </div>
                        <div class="first">
                            <span class="name">专家组组长：</span>
                            <span class="con">{{ groupLeader }}</span>
                        </div>
                    </div>
                    <div class="desc">
                        <span class="name">项目描述：</span>
                        <span class="con">{{ contents }}</span>
                    </div>
                    <el-button type="primary" round style="display: inline-block; margin-left: 150px; margin-bottom: 25px;" @click="showAddEmpView">添加专家</el-button>
                    <span class="divider" />
                </div>
            </div>
        </div>
        <!-- 专家信息表格 -->
        <div>
            <template>
                <el-table :data="profInfoList" border stripe style="width: 100%;">
                    <el-table-column fixed type="index" prop="id" align="center" label="序号" width="70" />
                    <el-table-column prop="profName" align="center" label="姓名" width="90" fixed />
                    <el-table-column prop="userSex" align="center" label="性别" width="70" />
                    <el-table-column prop="highestEducation" align="center" label="学历" width="70" />
                    <el-table-column prop="profTitle" align="center" label="职称" width="70" />
                    <el-table-column prop="unitName" label="工作单位" align="center" />
                    <el-table-column prop="profPost" align="center" label="职务" width="120" />
                    <el-table-column prop="currentMajor" align="center" label="主要从事专业" />
                    <el-table-column prop="profPhone" align="center" label="联系电话" width="130" />
                    <el-table-column prop="profRemark" align="center" label="备注" width="90" />
                    <el-table-column align="center" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button style="padding: 3px;" type="primary" size="mini" @click="showCheckExpView(scope.row)">查看高级资料</el-button>
                            <el-button type="danger" style="padding: 3px;" size="mini" @click="deleteProfInfoList(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 添加专家弹窗 -->
        <el-dialog title="添加专家" :visible.sync="dialogVisible" width="70%">
            <div>
                <el-form ref="addForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家姓名:" prop="profName">
                                <el-input v-model="emp.profName" size="small" prefix-icon="el-icon-edit" placeholder="请输入专家姓名" clearable style="width: 155px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="userSex">
                                <el-radio-group v-model="emp.userSex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历:" prop="highestEducation">
                                <el-select v-model="emp.highestEducation" size="small" placeholder="请选择" style="display: flex; width: 120px;">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职称:">
                                <el-select v-model="emp.profTitle" size="small" placeholder="请选择" style="display: flex; width: 175px;">
                                    <el-option v-for="(item,index) in jobLevel" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="工作单位:" prop="unitName">
                                <el-input v-model="emp.unitName" size="small" prefix-icon="el-icon-edit" placeholder="请输入工作单位" clearable style="width: 350px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="主要从事专业:" prop="currentMajor">
                                <el-input v-model="emp.currentMajor" size="small" prefix-icon="el-icon-edit" placeholder="请输入主要从事专业" clearable style="width: 350px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家组名称:">
                                <span>{{ emp.groupName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="备注:">
                                <el-input v-model="emp.profRemark" size="small" prefix-icon="el-icon-edit" placeholder="请输入备注" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职务:">
                                <el-input v-model="emp.profPost" size="small" prefix-icon="el-icon-message" placeholder="请输入职务" clearable style="width: 135px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机号:" prop="profPhone">
                                <el-input v-model="emp.profPhone" size="small" prefix-icon="el-icon-phone" placeholder="请输入手机号" clearable style="width: 165px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 认 添 加</el-button>
            </span>
        </el-dialog>
        <!-- 查看专家高级资料弹窗 -->
        <el-dialog class="dialog-component" title="专家高级资料详情" :visible.sync="dialogVisible1" width="60%">
            <div>
                <el-form ref="checkForm" :model="exp">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家姓名:" prop="profName">
                                <el-input v-model="exp.profName" placeholder="输入专家姓名" prefix-icon="el-icon-edit" clearable style="width: 145px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="userSex">
                                <el-radio-group v-model="exp.userSex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="highestEducation">
                                <el-select v-model="exp.highestEducation" placeholder="请选择" style="display: flex; width: 120px;">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职称:" prop="profTitle">
                                <el-select v-model="exp.profTitle" placeholder="请选择" style="display: flex; width: 200px;">
                                    <el-option v-for="(item,index) in jobLevel" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="工作单位:" prop="unitName">
                                <el-input v-model="exp.unitName" placeholder="请输入工作单位" prefix-icon="el-icon-edit" clearable style="width: 520px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职务:" prop="profPost">
                                <el-input v-model="exp.profPost" placeholder="请输入职务" prefix-icon="el-icon-edit" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="主要从事专业:" prop="currentMajor">
                                <el-input v-model="exp.currentMajor" placeholder="请输入主要从事专业" prefix-icon="el-icon-edit" clearable style="width: 495px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系电话:" prop="profPhone">
                                <el-input v-model="exp.profPhone" placeholder="请输入电话" prefix-icon="el-icon-edit" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="所属专家组:" prop="groupName">
                                <el-select v-model="exp.groupName" placeholder="请选择" style="display: flex; width: 140px;">
                                    <el-option v-for="(item,index) in groups" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="备注:" prop="profRemark">
                                <el-input v-model="exp.profRemark" placeholder="请输入备注" prefix-icon="el-icon-edit" clearable style="width: 135px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="证件类型:" prop="certifiType">
                                <el-select v-model="exp.certifiType" placeholder="请选择" style="display: flex; width: 110px;">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="证件号:" prop="certifiId">
                                <el-input v-model="exp.certifiId" placeholder="请输入证件号" prefix-icon="el-icon-edit" clearable style="width: 200px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="政治面貌:" prop="politicName">
                                <el-select v-model="exp.politicName" placeholder="政治面貌" style="width: 155px;">
                                    <el-option v-for="(item,index) in politics" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="民族:" prop="nationName">
                                <el-select v-model="exp.nationName" placeholder="请选择" style="width: 140px;">
                                    <el-option v-for="(item,index) in nation" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯:" prop="residence">
                                <el-input v-model="exp.residence" placeholder="请输入籍贯" prefix-icon="el-icon-edit" clearable style="width: 140px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="毕业院校:" prop="graduateSchool">
                                <el-input v-model="exp.graduateSchool" placeholder="请输入毕业院校" prefix-icon="el-icon-edit" clearable style="width: 190px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="所学专业:" prop="profMajor">
                                <el-input v-model="exp.profMajor" placeholder="输入所学专业" prefix-icon="el-icon-edit" clearable style="width: 155px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="单位类型:" prop="unitType">
                                <el-select v-model="exp.unitType" placeholder="请选择" style="display: flex; width: 115px;">
                                    <el-option v-for="item in options2" :key="item.val" :label="item.lab" :value="item.val" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="专家状态:" prop="profStatus">
                                <el-select v-model="exp.profStatus" placeholder="请选择" style="display: flex; width: 110px;">
                                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <div class="time">
                                <span>加入时间：</span>
                                <span>{{ exp.createTime }}</span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="time">
                                <span>过期时间：</span>
                                <span>{{ exp.passTime }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="savaChange">保 存 修 改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'ExpertTeamLibraryDetails',
    data() {
        return {
            exp: {}, // 高级资料绑定数据
            groups: [], // 专家组下拉选择
            jobLevel: [], // 职称下拉选择
            nation: [], // 民族下拉选择
            politics: [], // 政治面貌下拉选择
            emp: {},
            dialogVisible: false,
            dialogVisible1: false,
            groupId: '',
            groupName: '',
            groupLeader: '',
            contents: '',
            profInfoList: [],
            rules: { // 校验,与prop名对应
                profName: [
                    { required: true, trigger: 'blur', message: '请输入专家姓名' } // 没输入时会弹出提醒
                ],
                userSex: [
                    { required: true, trigger: 'change', message: '请选择性别' }
                ],
                highestEducation: [
                    { required: true, trigger: 'change', message: '请选择学历' }
                ],
                unitName: [
                    { required: true, trigger: 'blur', message: '请输入所在单位' }
                ],
                profPhone: [
                    { required: true, trigger: 'blur', message: '请输入手机号' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: 'blur', message: '手机号码不正确' }
                ],
                currentMajor: [
                    { required: true, trigger: 'blur', message: '请输入主要从事专业' }
                ]
            },
            options1: [{
                value: '选项1',
                label: '居民身份证'
            }, {
                value: '选项2',
                label: '港澳台通行证'
            }],
            options2: [{
                val: '选项1',
                lab: '企业'
            }, {
                val: '选项2',
                lab: '政府机构'
            }, {
                val: '选项3',
                lab: '公益性机构'
            }, {
                val: '选项4',
                lab: '高校'
            }, {
                val: '选项5',
                lab: '科研院所'
            }, {
                val: '选项6',
                lab: '其他'
            }],
            options3: [{
                value: '选项1',
                label: '博士'
            }, {
                value: '选项2',
                label: '硕士'
            }, {
                value: '选项3',
                label: '本科'
            }, {
                value: '选项4',
                label: 'MBA'
            }, {
                value: '选项5',
                label: '大专'
            }, {
                value: '选项6',
                label: '中专'
            }, {
                value: '选项7',
                label: '高中'
            }, {
                value: '选项8',
                label: '初中'
            }, {
                value: '选项9',
                label: '小学'
            }, {
                value: '选项10',
                label: '其他'
            }],
            options4: [{
                value: '选项1',
                label: '正常'
            }, {
                value: '选项2',
                label: '过期'
            }, {
                value: '选项3',
                label: '退出'
            }]
        }
    },
    created() {
        this.groupId = this.$route.query.groupId
        this.groupName = this.$route.query.groupName
        this.groupLeader = this.$route.query.groupLeader
        this.contents = this.$route.query.contents
        this.getRequest('/system/group/getAllProfGroupsInfo?profGroupName=' + this.$route.query.groupName).then(resp => {
            if (resp) {
                this.profInfoList = resp.data[0].profInfoList
                this.$forceUpdate()
            }
        })
        this.initGroups()
        this.initPolitics()
        this.initNation()
        this.initJobLevel()
    },
    methods: {
        savaChange() { // 确认保存修改专家高级资料
            this.$refs['checkForm'].validate(valid => {
                if (valid) {
                    this.putRequest('/system/prof/updateProfInfo', this.exp).then(resp => {
                        if (resp) {
                            this.dialogVisible1 = false
                            Message.success('更新成功')
                        }
                    })
                }
            })
        },
        showCheckExpView(row) { // 添加查看高级资料按钮绑定弹窗事件
            this.dialogVisible1 = true
            this.exp = row
        },
        deleteProfInfoList(data) { // 删除一条专家信息
            this.$confirm('此操作将永久删除  ' + data.profName + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/group/deleteProf/', data.profName).then(resp => {
                    if (resp) {
                        this.getRequest('/system/group/getAllProfGroupsInfo?profGroupName=' + this.groupName).then(resp => {
                            if (resp) {
                                this.profInfoList = resp.data[0].profInfoList
                                this.$forceUpdate()
                            }
                        })
                        Message.success('删除成功')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        doAddEmp() { // 添加专家
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/prof/addProf', this.emp).then(resp => {
                        if (resp) {
                            this.dialogVisible = false
                            this.getRequest('/system/group/getAllProfGroupsInfo?profGroupName=' + this.groupName).then(resp => {
                                if (resp) {
                                    this.profInfoList = resp.data[0].profInfoList
                                    this.$forceUpdate()
                                }
                            })
                            Message.success('添加成功')
                        }
                    })
                }
            })
        },
        initPolitics() { // 获取‘政治面貌’下拉选择信息
            this.getRequest('/system/prof/getPolitics').then(resp => {
                if (resp) {
                    this.politics = resp.data
                }
            })
        },
        initGroups() { // 获取‘专家组’下拉选择信息
            this.getRequest('/system/prof/getGroups').then(resp => {
                if (resp) {
                    this.groups = resp.data
                }
            })
        },
        initJobLevel() { // 获取‘职称’下拉选择信息
            this.getRequest('/system/cfg/joblevel/info').then(resp => {
                if (resp) {
                    this.jobLevel = resp.data
                }
            })
        },
        initNation() { // 获取‘民族’下拉选择信息
            this.getRequest('/system/prof/getNations').then(resp => {
                if (resp) {
                    this.nation = resp.data
                }
            })
        },
        showAddEmpView() { // 添加专家按钮绑定弹窗事件
            this.dialogVisible = true
            this.emp = {groupName: this.groupName}
            this.initGroups()
            this.initJobLevel()
        }
    }
}
</script>

<style scoped lang="scss">
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 20px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.time {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.one {
    display: flex !important;
}
.name {
    min-width: 62px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
}
.desc {
    display: inline-block;
    margin-left: 40px;
    margin-bottom: 25px;
}
.divider {
    display: block;
    border-bottom: solid 1px #f3f3f3;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.con {
    font-size: 16px;
}
</style>
